<template>
    <hl-page :title="title" :hidden-back="false" :hidden-tab-bar="true">
        <div class="content" slot="content">
            <cube-scroll ref="scroll" :options="options" @pulling-down="onPullingDown">
                <gift-sub-item v-for="item in logs" :key="item.id" :item="item"/>
            </cube-scroll>
            <div class="empty-content" v-show="logs.length == 0">
                <cube-loading v-show="loading" :size="40"></cube-loading>
                <img v-show="!loading" class="icon" src="../assets/images/empty.jpg"/>
                <p v-show="!loading" class="label">暂无数据</p>
            </div>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import LogItem from "../components/log-item";
    import {Url} from "../utils/config";
    import GiftItem from "../components/gift-item";
    import GiftSubItem from "../components/gift-sub-item";

    export default {
        components: {
            GiftSubItem,
            GiftItem,
            LogItem,
            HlPage
        },
        name: "gift-detail",
        mounted() {
            this.title = this.$route.query.title ? this.$route.query.title : '津贴详情';
            this.id = this.$route.query.id;
            this.onPullingDown()
        },
        data() {
            return {
                id: 0,
                title: '',
                loading: false,
                page: 1,
                options: {
                    pullDownRefresh: {
                        threshold: 90,
                        stop: 40,
                        txt: '下拉刷新成功'
                    },
                },
                logs: [],
            }
        },
        methods: {
            onPullingDown() {
                this.loadLog()
            },

            loadLog() {
                this.loading = true;
                this.$get(Url.giftDetail, {id: this.id}).then((res) => {
                    this.loading = false;
                    this.logs = [];
                    this.logs = this.logs.concat(res.data);
                    this.$refs.scroll.forceUpdate()
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .content {
        height: 100%;
        position: relative;
        .empty-content {
            height: 100%;
            display: flex;
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            z-index: 10000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            .icon {
                width: 200px;
                height: auto;
            }
            .label {
                margin-top: 24px;
                font-size: 14PX;
                color: #888888;
            }
        }
    }
</style>